import React,{useEffect, useState,Key } from 'react'
import { Button,Card,Form, Input,Table,message,Tooltip } from 'antd';
import { useNavigate } from 'react-router-dom';
// module.css结尾的css是只有这个组件内能使用，不会出现类名重名导致的样式设置错误的问题 但移入时必须取一个名字来引入，使用是用这个名字加.类名
import style from "./index.module.css"
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"

//引入api中请求的方法
import { getHosSetListRequest,deleteHospitalRequest,deleteAllHospitalRequest } from '@/api/hospital/hospitalSet';



//引入类型
import type { getHosSetListRecordsType,getHosSetListItemsType } from '@/api/hospital/model/hospitalSetTypes'
import type{searchValueType} from './types'
export default function HosipitalSet() {
   //使用编程式路由导航hook
   const navigate = useNavigate()
   //data是表格的数据 每一个对象的中的key和columns中的dataIndex一一对象展示数据
   const [tableData, setTableData] = useState<getHosSetListRecordsType>([])
   //定义current(当前页码)的state[useState的泛型根据我们传入的参数推论出来了]
   const [current, setCurrent] = useState(1)
   //定义total(总个数)的state
   const [total, setTotal] = useState(0)
   //定义pageSize(每页的数量)的state
   const [pageSize, setPageSize] = useState(3)
   //定义isLoading(table是否加载中)
   const [isLoading, setIsLoading] = useState(false);
  //定义查询输入的内容
    const[searchValue,setSearchValue]=useState<searchValueType>({})
    //定义删除成功后的状态
    const[isDeleted,setIsDeleted]=useState(true)
    //定义全选和批量删除的状态,默认是禁止的
    const[isSelected,setIsSelected]=useState(true)
    //定义批量删除ids的初始状态为一个空数组
    const[bacthSelectIds, setBatchSelectIds]=useState<Key[]>([])

    
  //当组件加载的时候,开始请求分页列表的数据
  //注意:异步函数不能作为useEffect的参数,因为useEffect可能会书写return一个函数起到清理作用,如果是异步函数,则return就是异步的了
  useEffect(() => {
    //在请求开始之前,设置isLoading为true
    setIsLoading(true)
    //封装一个请求函数才可以,记得后续调用
    const getHosSetList = async () => {
      const result = await getHosSetListRequest({
        page: current,
        limit: pageSize,
        ...searchValue
      });
      // console.log(result, "result");
      //1.把得到的结果中records数据(医院列表的数组)设置给state
      setTableData(result.records)
      //2.把得到的结果中 数据的总长度设置给state
      setTotal(result.total)

      //请求完成后要把isLoading修改为false 
      setIsLoading(false)
    }
    getHosSetList();
  }, [current,pageSize,searchValue,isDeleted])






  //colums是控制表格的字段有哪些,title属性就是当前的字段名称,dataIndex就是用来和将来的数据进行一一对应的
  //render函数的第三个参数是当前的数据的下标
  const columns = [
    {
      title: '序号',
      width:60,
      dataIndex: 'name',
      key: 'name',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
      key: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
      key: 'hoscode',
    },
    {
      title: 'api基础路径',
      key: 'apiUrl',
      dataIndex: 'apiUrl',
      
    },
    {
      title: '签名',
      key: 'signKey',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      key: 'contactsName',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
      key: 'contactsPhone',
     
    },
    {
      title: '操作',
      width:120,
      key: "do",
      fixed:'right' as "right",//是否固定
      dataIndex: "do",
      render(_:any,data:getHosSetListItemsType){
        // console.log(data,'data')
        const {id}=data
        return(
          <div>
            <Tooltip placement="topLeft" title={'修改'}>
              <Button type='primary' icon={<EditOutlined />} className={style.mr} onClick={()=>{navigate(`/syt/hosipital/updatehosset/${id}`)}}></Button>
            </Tooltip>
            <Tooltip placement="topLeft" title={'删除'}>
              <Button type='primary' danger icon={<DeleteOutlined />} onClick={deleteHosHandle(id)}></Button>
            </Tooltip>
          
        </div >
        )
      }
    
    },
  ];
//事件函数
//1.点击页码以后的事件回调函数
 const pageChangeHandle = (current:number,pageSize:number)=>{
  setCurrent(current)
  setPageSize(pageSize)
 }
//2.点击查询提交表单的事件回调函数
const searchHosFinishHandle =(searchValue:searchValueType)=>{
    //参数是收集当前表单的值 组成的对象
  setSearchValue(searchValue)
}

  //3.添加医院事件回调函数
  const addHosHandle = () => {
    //编程式路由导航跳转
    navigate("/syt/hosipital/addhosset")
  }
//4.删除医院事件回调函数
const deleteHosHandle =(id:number)=>{
 return async()=>{
  await deleteHospitalRequest(id)
  setIsDeleted(!isDeleted)
  //做成功提示的
message.success('删除医院数据成功');
 } 

}
//5.批量删除的事件回调函数
const deleteAllHospitalHandle =async()=>{

  await deleteAllHospitalRequest(bacthSelectIds)
//重新渲染
  setIsDeleted(!isDeleted)
  //做成功提示的
message.success('批量删除医院数据成功');
setIsSelected(!isSelected)


}

  // //data是表格的数据 每一个对象的中的key和columns中的dataIndex一一对象展示数据
  // const data =  [
  //   {
  //     "id": 10,
  //     "createTime": "2022-04-11 16:41:18",
  //     "updateTime": "2022-06-15 08:22:30",
  //     "isDeleted": 0,
  //     "param": {},
  //     "hosname": "北京大学深圳医院",
  //     "hoscode": "2022222",
  //     "apiUrl": "http://api.bjdxszyy.cn",
  //     "signKey": "62b84e910bd6d7b67157aed66e7aa866",
  //     "contactsName": "隔壁老王",
  //     "contactsPhone": "13000000000",
  //     "status": 0
  //   },
  //   {
  //     "id": 9,
  //     "createTime": "2022-01-18 10:53:14",
  //     "updateTime": "2022-06-15 08:22:29",
  //     "isDeleted": 0,
  //     "param": {},
  //     "hosname": "民航总医院",
  //     "hoscode": "1000_8",
  //     "apiUrl": "http://api.mzyy.cn",
  //     "signKey": "6f8006485dca34cd5849b724981dbe99",
  //     "contactsName": "周全",
  //     "contactsPhone": "15745634567",
  //     "status": 1
  //   },
  //   {
  //     "id": 8,
  //     "createTime": "2022-01-18 10:53:10",
  //     "updateTime": "2022-06-15 08:22:27",
  //     "isDeleted": 0,
  //     "param": {},
  //     "hosname": "北京市海淀区同步中医骨科医院",
  //     "hoscode": "1000_7",
  //     "apiUrl": "http://api.hdqtb.cn",
  //     "signKey": "6f8006485dca34cd5849b724981dbe99",
  //     "contactsName": "王伟",
  //     "contactsPhone": "13134564567",
  //     "status": 0
  //   }
  // ]
  return (
    <div className={style.outer}>
      <Card>
        <Form
       
        name="basic"
        wrapperCol={{ span: 30 }}
        layout='inline'
        onFinish={searchHosFinishHandle}
      >
        {/* name是表单名称，会作为表单字段 id 前缀使用 */}
        <Form.Item
          name="hosname"

        >
          <Input placeholder='医院名称' />
        </Form.Item>
  
        <Form.Item
          name="hoscode"
        >
          <Input placeholder='医院编号' />
        </Form.Item>
  
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit" icon={ <SearchOutlined/>}>
           查询
          </Button>
        </Form.Item>
  
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="default"  htmlType="reset">
            清空
          </Button>
        </Form.Item>
        </Form>
      <div className={style.mt}>
        <Button type='primary' className={style.mr} onClick={addHosHandle}>添加</Button>
        <Button type="primary" danger disabled={isSelected} onClick={deleteAllHospitalHandle}>批量删除</Button>
      </div>
      {/* scroll表示是否产生滚动条 */}
      <Table 
             className={style.mt} 
             columns={columns} 
             dataSource={tableData} 
             scroll={{ x: 1300 }}
             loading={isLoading}
             bordered
            //  rowkey表示让哪个值作为虚拟dom唯一的值
             rowKey='id'
             //rowSelection代表给表格添加多选框，值为一个配置对象，对象中可以添加一个onchange的回调函数，是选中项发生变化的回调函数，回调函数的第一个参数获取到的被点击的这一行数据的唯一值id，用useState设置一个状态，当点击时，在这个回调函数中把这个状态进行修改，并把这个状态值给到批量删除的disabled属性，这样批量删除按钮就可以根据是否有选中数据来控制是否禁用了
             rowSelection={{
              onChange(ids: Key[]) {
                console.log(ids)
                setIsSelected(!ids.length)
                //当点击多选框后，就修改保存ids的状态
                setBatchSelectIds(ids)
              }
            }}
             pagination={{
                //页码的配置：当前页码
                current,
                //总数据的数量
                total,
                //每页条数
                pageSize,
                //展示更改每页条数的选项(默认total大于50条的时候开启)
                pageSizeOptions: [3,5,7,9],
                //是否直接开启更新每页条数的选项
                showSizeChanger: true,
                //展示一共有多少条
                showTotal(total) {
                  return `总共有${total}条数据`
                },
                onChange:pageChangeHandle
        }}/>
        </Card>
    </div>
      
    );
  };
  

